<template>
  <div>
    <div class="page-header-wrap">
      <Header v-model:search="searchProp" @confirm="queryData" />
    </div>
    <div class="page-content-wrap">
      <a-table
        :columns="columns"
        :data-source="resState.list"
        :pagination="pageInfo"
      >
        <template #title>
          <div class="table-header-wrap">
            <a-button type="primary" @click="showEdit">新增</a-button>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'paymode'">
            <span>
              <a-tag v-if="record.paymode == 1" color="blue"> 线下支付 </a-tag>
              <a-tag v-else color="green">在线支付</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'sendmode'">
            <span>
              <a-tag v-if="record.sendmode == 1" color="blue"> 店内用餐 </a-tag>
              <a-tag v-else color="green">店铺配送</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'totalAmount'">
            ￥{{ record.totalAmount }}
          </template>
          <template v-else-if="column.key === 'sendTime'">
            {{ record.sendTime || "立即出餐" }}
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="link" @click="showEdit(record)">编辑</a-button>
              <a-button type="link" @click="showChildEdit(record)">
                添加下级
              </a-button>
              <a-button type="link" @click="showRemove(record)">
                删除
              </a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <DrawerEdit
      v-model:visible="acState.editVisible"
      v-model:current="acState.current"
      @query="() => queryData(searchProp)"
    />
    <a-modal
      title="删除字典"
      v-model:visible="acState.removeVisible"
      :confirm-loading="acState.loading"
      @ok="handleRemove"
    >
      {{ acState.modalText }}
    </a-modal>
  </div>
</template>

<script setup>
import { SmileOutlined, DownOutlined } from "@ant-design/icons-vue"
import { ref, reactive, onMounted } from "vue"
import { selectPageList, remove } from "@/api/dict"
import { usePager } from "@/hooks"
import DrawerEdit from "./components/DrawerEdit.vue"
import { useActions } from "@/hooks/actions"
import Header from "./components/Header.vue"

const columns = [
  {
    title: "字典名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "父节点",
    dataIndex: "parentName",
    key: "parentName",
  },
  {
    title: "字典值",
    dataIndex: "value",
    key: "value",
  },
  {
    title: "排序值",
    dataIndex: "sortcode",
    key: "sortcode",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
  },
  {
    title: "操作",
    key: "action",
  },
]
const { pageInfo, queryData, resState } = usePager(selectPageList)
const { acState, showEdit, showRemove } = useActions()
const handleRemove = async () => {
  acState.loading = true
  const { code } = await remove({ id: acState.current.id })
  if (code !== 300) retutn
  acState.loading = false
  acState.removeVisible = false
  queryData(searchProp)
}
const showChildEdit = (row) => {
  showEdit({ parentId: row.id, parentName: row.name })
}

const searchProp = reactive({})
onMounted(async () => {
  queryData(searchProp)
})
</script>

<style lang="less"></style>
